<template>
  <div class="structure">
        <ul>
            <template
                v-for="(item, index) in data ? data : selections.pen"
                :key="index"
            >
                <li class="flex items-center justify-between p-3">
                <span>{{ item.name }}</span>
                <template v-if="item.visible">
                    <t-icon name="browse-off" title="隐藏" @click="openPen(item, index, false)" />
                </template>
                <template v-else>
                    <t-icon name="browse" title="显示" @click="openPen(item, index, true)" />
                </template>
                </li>
            </template>
        </ul>
    </div>
</template>

<script lang="ts" setup>
import { onMounted, onUnmounted, ref, watch } from 'vue';
import { useSelection } from '@/services/selections';
// import { useMeta2d } from '../services/meta2d';

const { selections } = useSelection();
// const meta2d = useMeta2d();
const props = defineProps({
    data: {
        type: Array,
        default: () => [],
    }
})



const openPen = (params: any, index: number, visible: any) => {
  selections.pen[index]['visible'] = visible
  meta2d.setValue({
    id: params.id,
    visible,
  }, { render: false })
}
</script>

<style lang="scss" scoped>
.structure {
    ul {
        li {
            height: 40px;
            border-bottom: 1px solid #f1f1f1;
            box-sizing: border-box;
            line-height: 40px;
            cursor: pointer;

            &:hover {
            background: #f1f1f1;

            span {
                color: #1890ff
            }
            }

            .t-icon {
            cursor: pointer;
            }
        }
    }
}
</style>